<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考勤状态控制</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .status {
            margin: 20px 0;
            padding: 15px;
            border-radius: 5px;
            text-align: center;
        }
        .status-normal {
            background-color: #e8f5e9;
            color: #2e7d32;
        }
        .status-late {
            background-color: #fff8e1;
            color: #ff8f00;
        }
        .status-absent {
            background-color: #ffebee;
            color: #c62828;
        }
        button {
            padding: 10px 15px;
            margin: 5px;
            cursor: pointer;
        }
        #checkInBtn {
            background-color: #4CAF50;
            color: white;
        }
        #checkOutBtn {
            background-color: #2196F3;
            color: white;
        }
        #finishBtn {
            background-color: #9E9E9E;
            color: white;
        }
    </style>
</head>
<body>
<h1>考勤状态控制</h1>
<div id="status" class="status status-absent">状态：未打卡</div>
<div>
    <button id="checkInBtn">上班打卡</button>
    <button id="checkOutBtn" disabled>下班打卡</button>
    <button id="finishBtn" disabled>完成考勤</button>
</div>

<script>
    // 获取 DOM 元素
    const statusElement = document.getElementById('status');
    const checkInBtn = document.getElementById('checkInBtn');
    const checkOutBtn = document.getElementById('checkOutBtn');
    const finishBtn = document.getElementById('finishBtn');

    // 初始化考勤状态
    let attendanceStatus = {
        checkIn: false,
        checkOut: false
    };

    // 上班打卡
    checkInBtn.addEventListener('click', () => {
        attendanceStatus.checkIn = true;
        statusElement.className = 'status status-normal';
        statusElement.textContent = '状态：已上班打卡';
        checkInBtn.disabled = true;
        checkOutBtn.disabled = false;
        console.log('上班打卡时间:', new Date().toLocaleTimeString());
    });

    // 下班打卡
    checkOutBtn.addEventListener('click', () => {
        attendanceStatus.checkOut = true;
        statusElement.className = 'status status-normal';
        statusElement.textContent = '状态：已下班打卡';
        checkOutBtn.disabled = true;
        finishBtn.disabled = false;
        console.log('下班打卡时间:', new Date().toLocaleTimeString());
    });

    // 完成考勤
    finishBtn.addEventListener('click', () => {
        statusElement.className = 'status status-absent';
        statusElement.textContent = '状态：考勤已完成';
        checkInBtn.disabled = true;
        checkOutBtn.disabled = true;
        finishBtn.disabled = true;
        attendanceStatus = { checkIn: false, checkOut: false };
        console.log('考勤已完成');
    });
</script>
</body>
</html>